<template>
  <div>
    <div @click="goback" class="goback">👈</div>
    <div class="songinfo">"三杰"时光荏苒,追寻逝去流年</div>
    <div class="backimg">
      <img
        src="http://qpic.y.qq.com/music_cover/H4L7icoRhSgTiaJ9e6rNiaM8UDZPUUVp2YNicNcGwXfIBevr2FUPTEia5Tg/300?n=1"
        alt=""
      />
    </div>
    <div class="songs">
      <li>
        <p>Enless Love(上学时期的心情表达)</p>
        <span>木子·Enless Love(上学时期的心情表达)</span>
      </li>
      <li>
        <p>萤火之旅</p>
        <span>木子·萤火之旅</span>
      </li>
      <li>
        <p>雨季的你(钢琴版)</p>
        <span>木子·四季心情</span>
      </li>
      <li>
        <p>城市的记忆</p>
        <span>雨前:钢琴的夜-Piano</span>
      </li>
      <li>
        <p>雨夜浪漫曲</p>
        <span>木子·雨夜浪漫曲</span>
      </li>
      <li>
        <p>16岁的夏季</p>
        <span>木子·16岁的夏季</span>
      </li>
      <li>
        <p>Before in rain</p>
        <span>木子·音乐笔记</span>
      </li>
      <li>
        <p>许愿星</p>
        <span>木子·许愿星</span>
      </li>
      <li>
        <p>Enless Love(上学时期的心情表达)</p>
        <span>木子·Enless Love(上学时期的心情表达)</span>
      </li>
      <li>
        <p>萤火之旅</p>
        <span>木子·萤火之旅</span>
      </li>
      <li>
        <p>雨季的你(钢琴版)</p>
        <span>木子·四季心情</span>
      </li>
      <li>
        <p>城市的记忆</p>
        <span>雨前:钢琴的夜-Piano</span>
      </li>
      <li>
        <p>雨夜浪漫曲</p>
        <span>木子·雨夜浪漫曲</span>
      </li>
      <li>
        <p>16岁的夏季</p>
        <span>木子·16岁的夏季</span>
      </li>
      <li>
        <p>Before in rain</p>
        <span>木子·音乐笔记</span>
      </li>
      <li>
        <p>许愿星</p>
        <span>木子·许愿星</span>
      </li>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route);
  },
  methods: {
    goback() {
      this.$router.push({ path: "/index" });
    },
  },
};
</script>
<style>
.goback {
  position: absolute;
  top: 3vw;
  left: 5vw;
  font-size: 7vw;
  z-index: 999;
}
.songinfo {
  position: absolute;
  top: 5vw;
  left: 20vw;
  font-size: 5vw;
  color: aliceblue;
  z-index: 999;
}
.backimg {
  width: 100vw;
  height: 100vw;
}
.backimg img {
  width: 100vw;
  height: 100vw;
  top: 0;
  left: 0;
  z-index: -1;
}
.backimg::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  /*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
  background-color: rgba(0, 0, 0, 0.5);
}
.songs {
  list-style: none;
  background: #222222;
  position: absolute;
  top: 50vh;
  width: 100vw;
}
.songs li {
  width: 80vw;
  height: 15vw;
  /* background: red; */
  margin-left: 8vw;
  margin-bottom: 5vw;
  margin-top: 5vw;
}
.songs li p {
  color: aliceblue;
  font-size: 16px;
  margin-bottom: 1vw;
}
.songs li span {
  color: gray;
  font-size: 12px;
}
</style>
